<template>
	<button v-if="enable && !primary" :style="{'width':width,'font-size':font_size,'padding-top':'4rpx','padding-bottom':'4rpx'}" :class="'button_class_' + theme"
		:hover-class="'button_hover_' + theme" @click.stop="click">{{text}}</button>
	<button @click.stop="click" v-else-if="primary" :style="{'width':width,'font-size':font_size}" :class="'button_class_'  + theme + '_default'" :hover-class="'button_hover_' + theme + '_default'">{{text}}</button>
	<button v-else :style="{'width':width,'font-size':font_size}" class="button_class_unable"
		hover-class=".button_hover_unable">{{text}}</button>
	
		
		
</template>

<script>
	export default {
		name: "fl_btn",
		data() {
			return {
				
			};
		},
		watch:{
			
		},
		props: {
			text: {
				type: String,
				default: "确定"
			},
			width: {
				type: String,
				default: "702rpx"
			},
			font_size:{
				type:String,
				default:"32rpx"
			},
			theme: {
				type: String,
				default: "black"
			},
			enable: {
				type: Boolean,
				default: true
			},
			primary:{
				type:Boolean,
				default:false
			}
		},
		methods: {
			click() {
				if (!this.enable)
					return
				this.$emit("click")
			}
		},
		mounted() {

		},
	}
</script>

<style lang="scss">
	//绿色镂空
	.button_class_green_default{
		background-color: white;
		color: $green;
		border: solid 2rpx $green;
	}
	.button_hover_green_default {
		background-color: rgba(228, 228, 228, 1);
		color: $green;
	}
	
	//黑色镂空
	.button_class_black_default{
		background-color: white;
		color: black;
		border: solid 2rpx black;
	}
	.button_hover_black_default {
		background-color: rgba(228, 228, 228, 1);
		color: black;
	}
	//红色镂空
	.button_class_red_default{
		background-color: white;
		color: $red;
		border: solid 2rpx red;
	}
	.button_hover_red_default {
		background-color: rgba(228, 228, 228, 1);
		color: $red;
	}
	
	
	
	// 绿色背景
	.button_class_green {
		background-color: rgba(79, 218, 218, 1);
		color: black;
	}

	.button_hover_green {
		background-color: rgba(79, 218, 218, 0.7);
		color: black;
	}

	// 黑色背景
	.button_class_black {
		background-color: rgba(23, 14, 15, 1);
		color: white;
	}

	.button_hover_black {
		background-color: rgba(23, 14, 15, 0.7);
		color: white;
	}

	// 红色背景
	.button_class_red {
		background-color: rgba(215, 29, 86, 1);
		color: white;
	}

	.button_hover_red {
		background-color: rgba(215, 29, 86, 0.7);
		color: white;
	}
	// 浅灰色灰色背景
	.button_class_lightgray {
		background-color: #efefef;
		color: #8D9090;
		border: none;
	}

	// 不可用状态
	.button_class_unable {
		background-color: rgba(228, 228, 228, 1);
		color: white;
	}

	.button_hover_unable {
		background-color: rgba(228, 228, 228, 1);
		color: white;
	}
</style>
